<!DOCTYPE html>
<html>

<head>
    <title>My first Vue app</title>
    <script src="https://unpkg.com/vue@2"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>

    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>



    <!-- <p v-text="username"></p>
    <p v-text="gender">性别</p> -->

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue! world'
            }
        })

        var app2 = new Vue({
            el: '#app-2',
            data: {
                message: '页面加载于 ' + new Date().toLocaleString()
            }
        })



        new Vue({
            data: {
                a: 1
            },
            created: function () {
                // `this` 指向 vm 实例
                console.log('a is: ' + this.a)
            }
        })
        // => "a is: 1"


        // var data = { a: 1 }
        // var vm = new Vue({
        //     el: '#app',
        //     data: data
        // })

        // vm.$data === data // => true
        // vm.$el === document.getElementById('app') // => true

        // // $watch 是一个实例方法
        // vm.$watch('a', function (newValue, oldValue) {
        //     // 这个回调将在 `vm.a` 改变后调用
        //     console.log('a is: ' + this.a);
        //     console.log('who call me? fuck');
        // })
    </script>
</body>

</html>